// 顶部导航菜单 用tabs实现
<template>
  <div class="mobile-main">
    <van-row class="header">
      <van-nav-bar class="nav-top" fixed v-if="memberGameSelected" left-arrow :title="navTitle" right-text="菜单" @click-left="onClickLeft" @click-right="onClickRight">
        <van-cell class="nav-cell" :title="memberGames[memberGameSelected]" arrow-direction="down" clickable is-link slot="left" v-if="showNavGame" />
        <van-icon class="nav-cell" name="wap-nav" slot="right" />
      </van-nav-bar>
      <van-actionsheet class="nav-action" v-model="showAction" :actions="actions" />
      <van-popup v-model="showPopup" position="right" style="width:65%">
        <van-row class="pop-top"> AAAAA </van-row>
        <van-row class="pop-info">
          <van-col span="8">
            <van-row>{{memberInfo.username}}</van-row>
            <van-row>账号</van-row>
          </van-col>
          <van-col class="middle" span="8">
            <van-row>{{memberInfo.qk_remaining_amount}}</van-row>
            <van-row>快开余额</van-row>
          </van-col>
          <van-col span="8">
            <van-row>{{memberInfo.hk_remaining_amount}}</van-row>
            <van-row>香港余额</van-row>
          </van-col>
        </van-row>
        <van-cell-group v-if="nav">
          <van-cell v-for="(item,index) in nav" v-if="!item.hidden" :key="`popnav${index}`" :icon="item.meta.icon" :class="currentPath == item.fullPath && 'cell-active'" @click="onClickCell" :to="item.fullPath" :title="item.meta.title" clickable is-link />
          <van-cell icon="close" @click="Logout" title="退出" clickable is-link />
        </van-cell-group>
      </van-popup>
    </van-row>

    <router-view class="mobile-content"></router-view>

    <van-tabbar v-model="activeBar" class="nav-bar">
      <van-tabbar-item v-for="(item,index) in navBar" :key="`navBar${index}`" :to="item.fullPath" :icon="item.meta.icon">{{item.meta.bar.title}}</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import {
    Row,
    Col,
    NavBar,
    Toast,
    Tabbar,
    TabbarItem,
    Button,
    Icon,
    Popup,
    Cell,
    CellGroup,
    Actionsheet,
  } from 'vant'

  export default {
    name: 'MobileLayout',
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [NavBar.name]: NavBar,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Actionsheet.name]: Actionsheet,
    },

    data() {
      return {
        currentPath: '',
        showPopup: false,
        activeBar: 0,
        nav: null, //侧边栏
        navBar: [], //底部栏
        showAction: false,
      }
    },

    computed: {
      ...mapGetters([
        'memberGames',
        'memberInfo',
        'memberPages',
        'memberLottery',
        'memberGameSelected',
        'memberPageSelected',
      ]),
      actions() {
        const res = []
        for (const key in this.memberGames) {
          if (this.memberGames.hasOwnProperty(key)) {
            const name = this.memberGames[key]
            res.push({ key, name, callback: this.onClickAction })
          }
        }
        return res
      },
      navTitle() {
        return this.$route.meta.title
      },

      // 某些特定路由,不显示左键游戏
      showNavGame() {
        const notShowNavGameRoute = [
          '/mobile/profile',
          '/mobile/jiang',
          '/mobile/bet',
        ]

        const res = notShowNavGameRoute.findIndex(item => {
          return item == this.currentPath
        })
        return res < 0
      },
    },

    async created() {
      this.currentPath = this.$route.fullPath
      this.getNavFromRouter()

      //获取当前游戏
      await this.$store.dispatch('MemberGames', {})
    },

    methods: {
      getNavFromRouter() {
        this.$router.options.routes.map(item => {
          if (item.path == '/mobile') {
            this.nav = item.children
            this.nav.map(row => {
              row['fullPath'] = `/mobile/${row.path}`
              row.meta.bar && (this.navBar[row.meta.bar.index] = row)
            })
          }
        })
      },
      onClickLeft() {
        if (this.showNavGame) {
          this.showAction = true
        } else {
          //返回
          this.$router.go(-1)
        }
      },
      onClickRight() {
        this.showPopup = true
      },
      onClickCell(...agrs) {
        this.showPopup = false
      },
      onClickAction(item) {
        this.$store.commit('MEMBER_SELECT_GAME', item.key)
        this.showAction = false
      },

      Logout() {
        this.$store.dispatch('FedLogOut').then(() => {
          location.reload() // 为了重新实例化vue-router对象 避免bug
        })
      },
    },

    watch: {
      $route(to, from) {
        this.currentPath = to.path // 从path中获取
        this.title = to.meta.title
      },
      currentPath(to, from) {
        // 根据当前path的变化,触发tabbar的变化
        this.navBar.map((item, index) => {
          item.fullPath == to && (this.activeBar = index)
        })
      },
      async memberGameSelected(to, from) {
        await this.$store.dispatch('MemberOrdersPages', {})
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import 'src/styles/variables.scss';

  .mobile-main {
    background-color: $bgc;
    min-height: 100vh;
    .header {
      .nav-top {
        @extend .bg;
        .nav-cell {
          background: none;
          color: #fff;
          font-weight: 700;
        }
      }
      .pop-top {
        @extend .bg;
        font-size: 30px;
        font-weight: 700;
        padding: 20px 0px;
        text-align: center;
      }
      .pop-info {
        background-color: $bga;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        padding: 10px 0;
        .middle {
          border-left: $bgc 1px solid;
          border-right: $bgc 1px solid;
        }
      }
      .cell-active {
        color: $linkActive;
      }
    }

    .mobile-content {
      margin-top: 46px; //上导航
      padding-bottom: 51px; //下导航
      min-height: calc(100vh - 46px); //计算
    }
    .nav-bar {
    }
  }
</style>
